<!DOCTYPE HTML>
<html>
    <head>
        <title>nativeDroid - Theme for jQuery Mobile</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		
		<!-- FontAwesome - http://fortawesome.github.io/Font-Awesome/ -->
        <link rel="stylesheet" href="css/font-awesome.min.css" />

		<!-- jQueryMobileCSS - original without styling -->
        <link rel="stylesheet" href="css/jquerymobile.css" />

		<!-- nativeDroid core CSS -->
        <link rel="stylesheet" href="css/jquerymobile.nativedroid.css" />

		<!-- nativeDroid: Light/Dark -->
        <link rel="stylesheet" href="css/jquerymobile.nativedroid.dark.css"  id='jQMnDTheme' />

		<!-- nativeDroid: Color Schemes -->
        <link rel="stylesheet" href="css/jquerymobile.nativedroid.color.green.css" id='jQMnDColor' />

		<!-- jQuery / jQueryMobile Scripts -->
		<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>


    </head>
    <body>
        
    <div data-role="page" data-theme='b'>


        <div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme='b'>
            <a href="index.html" data-ajax="false"><i class='icon-ellipsis-vertical'></i></a>
            <h1>Text</h1>
        </div>
        
        <div data-role="content">   


        <div class='inset'>
            <h1>Lorem ipsum</h1>
            <h2>Dolor sit amet.</h2>        
            <h3>This is a h3-tag</h3>
            <h4>This is a h4-tag</h4>
            <h5>This is a h5-tag</h5>
            <h6>and finally the h6-tag</h6>
            <p>Lorem Ipsum is simply dummy <code>text of the printing and typesetting industry</code>. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
			<p><code>Writing some Code is pretty easy with the &lt;code&gt;-element.</code></p>			
			<p>Progress-Bars</p>
			<progress value='1'></progress>
			<progress value='50' max='100'></progress>
			<progress value='0'></progress>
			<progress></progress>
			<div class='message warning'>
				<i class='icon-warning-sign'></i>
				<p>This is a warning Message.</p>
			</div>
			<div class='message info'>
				<i class='icon-lightbulb'></i>
				<p>This is an info note.</p>
			</div>
			<div class='message error'>
				<i class='icon-exclamation-sign'></i>
				<p>This is an error message that goes over two lines on a mobile device in portrait mode.</p>
			</div>
			<div class='message success'>
				<i class='icon-ok'></i>
				<p>This is a success message.</p>
			</div>
        </div> 
        
        <hr />  

        <div class='inset'>
            <h1>Code examples</h1>
			<h2>Headings (1-6)</h2>
			<p>You can simply use the default <code>&lt;h1&gt;</code> until <code>&lt;h6&gt;</code>-Tag.</p>
			<h2>Paragraph</h2>
			<p>You can simply use the default <code>&lt;p&gt;</code>-Tag.</p>
			<h2>Code</h2>
			<h3>Inline-Code:</h3>
			<p><code>&lt;code&gt; .classname &lt;/code&gt;</code> </p>
			<h3>Multiline-Code:</h3>
			<p><pre>&lt;pre&gt;<br />&ensp;foo = bar;<br />&lt;/pre&gt;</pre></p>
			<h2>Messages</h2>
			<h3>Example</h3>
			
			<div class='message warning'>
				<i class='icon-warning-sign'></i>
				<p>This is a warning Message.</p>
			</div>

			<p><pre>&lt;div class='message warning'&gt;<br />&ensp;&lt;i class='icon-warning-sign'&gt;&lt;/i&gt;<br />&ensp;&lt;p&gt;This is a warning Message&lt;/p&gt;<br />&lt;/div&gt;</pre></p>
			<h3>Styling Classes</h3>
			<p>Info: <code>.info</code></p>
			<p>Success: <code>.success</code></p>
			<p>Warning: <code>.warning</code></p>
			<p>Error: <code>.error</code></p>
		</div>	        
	        
        </div>

    </div>
    
    </body>
</html>
